<template>
  <div class="container_main">
    <div class="firstBox"></div>
    <div class="secondBox">
      <div class="hollCard">
        <!-- <div style="height: 100%" v-for="(items, index) in " :key="index"> -->
        <div class="titleStove">
          <div class="divGroup">
            <i class="iconfont_class" :class="secondTwoBoxTable.icons"></i>
            <div class="typeface">{{ secondTwoBoxTable.titleName }}</div>
          </div>
          <!-- <div class="tabPage">{{items.nums}}号炉窑&nbsp;&nbsp;环保在线监测</div> -->
        </div>
        <tables
          :redColor="true"
          :tableTypes="secondTwoBoxTable"
          :tableData="secondTwoBoxTable.tableCheckData"
        />
        <!-- </div> -->
      </div>
    </div>
    <div class="thirdBox">
      <tunnelProcess
        :svgData="svgDatas"
        :windyStatus="windStatus"
        :dtuyStatus="dtuStatus"
      />
      <div class="smallCard">
        <div class="cardTitle">
          <i class="iconfont icon-shishijiance"></i>
          <div class="cardSvg">温度折线图</div>
        </div>
        <div class="tableThird">
          <moreLegendChart :chartsData="thirdBoxTable" />
        </div>
      </div>
    </div>
    <div class="fourthBox">
      <div class="smallCard upCard">
        <div class="cardTitle">
          <i class="iconfont icon-shuju"></i>
          <div class="cardSvg">风机频率</div>
        </div>
        <div class="forChart">
          <div class="char" v-for="(item, index) in ployData" :key="index">
            <ployChart :realData="item" />
          </div>
        </div>
      </div>
      <div class="smallCard downCard">
        <oxygen :oxygenData="oxygenDatas" />
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import tunnelProcess from "./tunnelComponents/tunnelProcess.vue";
import ployChart from "./steepComponents/ployChart.vue";
import moreLegendChart from "../components/moreLegendChart";
// import dialBroad from '../components/dialBroad/index.vue' // 仪表盘
// import capsuleDiagram from '../components/capsuleDiagram/index.vue' // 胶囊柱图
import oxygen from "./tunnelComponents/oxygen.vue";
import tables from "../components/tables/index.vue";

import "@/mock/allData.js";
export default {
  name: "tunnel",
  components: {
    tunnelProcess,
    ployChart,
    oxygen,
    tables,
    moreLegendChart,
  },
  data() {
    return {
      chartData: {},
      dtuStatus: false,
      windStatus: false,
      ployData: [],
      svgDatas: [],
      oxygenDatas: {},
      typesfourthBoxTable: {
        stripe: false,
        formHead: [],
        tableAllData: [],
      },
      thirdBoxTable: [],
      secondTwoBoxTable: {
        icons: "iconfont icon-shujuyuan",
        titleName: "监测数据",
        stripe: false,
        formHead: [],
        tableCheckData: [],
      },
      timer: null,
      websock: null,
    };
  },
  created() {
    // this.$socket.createWebSocket('ws://106.52.170.16:8090/getTunnelWSData')
    // // this.$socket.createWebSocket('ws://192.168.117.216:8090/getTunnelWSData')
    // this.$socket.registerCallBack('chartAllData', this.getAllData)
    this.initWebSocket();
  },
  mounted() {},
  // beforeRouteLeave (to, from, next) {
  //   this.$socket.unRegisterCallBack('chartAllData')
  //   this.$socket.routerLeaveClose()
  //   next()
  // },
  destroyed() {
    this.websock.close(); // 离开路由之后断开websocket连接
  },
  methods: {
    initWebSocket() {
      // 初始化weosocket
      // this.websock = new WebSocket('ws://192.168.240.216:8060/getTunnelWSData')
      this.websock = new WebSocket("ws://101.42.233.226:8060/getTunnelWSData");
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onerror = this.websocketonerror;
    },
    websocketonerror() {
      // 连接建立失败重连
      this.reconnect();
    },
    websocketonmessage(e) {
      // console.log('接收到的隧道窑数据', JSON.parse(e.data))
      const redata = JSON.parse(e.data);
      this.getAllData(redata);
    },
    reconnect() {
      // 重连
      this.timer && clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.initWebSocket();
      }, 5000);
    },
    // 调后台数据的接口统一在这个组件写 统一传给子组件
    // 第二栏的table数据
    getStoveData(data) {
      // showTemperTable().then(res => {
      // if (data !== undefined) {
      const formHead = [
        { 显示名称: "key" },
        { 实时: "now" },
        { "10分钟": "ten" },
        { "30分钟": "thirty" },
        { "1小时": "hour" },
      ];
      this.secondTwoBoxTable.formHead = formHead;
      // console.log('隧道窑的table是不是un', data)
      var dataCopy = JSON.parse(JSON.stringify(data));
      var filteData = dataCopy.filter((item) => {
        return item.key.slice(0, 4) !== "null";
      });
      this.secondTwoBoxTable.tableCheckData = filteData;
      // }
      // })
    },
    getFanFrequency(data) {
      // showFanFrequency().then(res => {
      this.chartData = JSON.parse(JSON.stringify(data));
      for (var name in this.chartData) {
        this.$set(
          this.ployData,
          parseInt(name.charAt(name.length - 1)) - 1,
          this.chartData[name]
        );
        // this.ployData[index] = this.chartData[`source${index + 1}`]
      }
      // })
    },
    // 中间下面的
    getMachineData(data) {
      // showTemperatureLine().then(res => {
      this.thirdBoxTable = data || [];
      console.log(123123, "这是sdjfjdjf");
      // })
    },
    getSvgDatas(data, dtuStatus, windStatus) {
      this.svgDatas = data;
      this.dtuStatus = dtuStatus;
      this.windStatus = windStatus;
    },
    getOxygen(data) {
      this.oxygenDatas = data;
    },
    getAllData(ret) {
      if (ret !== undefined) {
        // console.log('ret接收的隧道窑', ret)
        this.getSvgDatas(ret.configuration, ret.dtuStatus, ret.windStatus); // oxygen temperLine temperTable
        this.getStoveData(ret.temperTable);
        // this.getMachineData(ret.temperLine.source);
        this.getFanFrequency(ret.wind);
        // this.getOxygen(ret.oxygen);
        let tempa = JSON.parse(JSON.stringify(ret.temperTable));
        tempa = tempa.splice(0, 19);
        try {
          this.getOxygen(ret.oxygen);
        } catch (error) {}
        try {
          if (ret.temperLine.source[0].length != 17) {
            ret.temperLine.source[0] = [
              "createTime",
              "3#车位",
              "7#车位",
              "11#车位",
              "13#车位上",
              "13#车位中",
              "13#车位下",
              "15#车位",
              "17#车位",
              "19#车位上",
              "19#车位中",
              "19#车位下",
              "21#中",
              "23#中",
              "25#",
              "31#",
              "21#底",
            ];
          }
          // for (let index = 0; index < ret.temperLine.source.length; index++) {
          //   if (ret.temperLine.source[index].length != 17) {
          //     ret.temperLine.source.splice(index, 1);
          //   }
          // }
          this.getMachineData(ret.temperLine.source);
        } catch (error) {}
      }
    },
  },
};
</script>
